<template>
  <div class="">
    <my-header>
      <span>添加页面</span>
    </my-header>

    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="name"
          name="name"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="grade"
          type="text"
          name="grade"
          label="班级"
          placeholder="班级"
          :rules="[{ required: true, message: '请填写班级' }]"
        />
        <van-field
          v-model="home"
          type="text"
          name="home"
          label="宿舍号"
          placeholder="宿舍号"
          :rules="[{ required: true, message: '请填写宿舍号' }]"
        />
        <van-field name="sex" label="性别">
          <template #input>
            <van-radio-group v-model="sex" direction="horizontal">
              <van-radio name="男">男</van-radio>
              <van-radio name="女">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import myHeader from "@/components/myHeader.vue";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      name: "",
      //名字
      grade: "",
      //班级
      home: "",
      //宿舍好
      sex: "",
      //性别
    });
    const onSubmit = (val) => {
      console.log(val);
      store.commit("add", val);
    };
    //往vuex中添加数据 val是submit事件自带的一个参数  就是表单里填的东西 但是要注意 表单的name 要改成自己想要的英文的字段
    return { ...toRefs(data), onSubmit };
  },
  components: {
    myHeader,
  },
};
</script>

<style lang="scss"></style>
